import React, { useState, useEffect } from 'react';
import { Button, message, Modal, Select, Row, Col, Radio } from 'antd';
import { resetLotteryCode, getLottery, resetLottery, getLotteryResult, resetLotteryResult } from '../store/index';

const { Option } = Select;

export default function PlayButton({ state, onChange }) {
    const [visible, setVisible] = useState(false);
    const [playState, setPlayState] = useState(state);
    const [type, setType] = useState(undefined);

    const [resetVisible, setResetVisible] = useState(false);
    const [resetType, setResetType] = useState(1);

    const lotteryList = getLottery();

    // 开始
    const startHandle = () => {
        if (lotteryList.length === 0) {
            message.error('请先设置奖项')
            return;
        }

        setVisible(true);
    };

    // 停止
    const endHandle = () => {
        setPlayState(false);
        onChange(false, 0);
    };

    const okHandle = () => {
        const lotteryResult = getLotteryResult(type);
        if (lotteryResult.result.length === lotteryResult.number) {
            message.error('该奖项已抽完');
            return;
        }

        setVisible(false);
        setPlayState(true);
        onChange(true, type);
    };

    useEffect(() => {
        if (lotteryList.length > 0) {
            setType(lotteryList[0].key);
        }
    }, [lotteryList]);

    const LotteryTips = () => {
        const item = lotteryList.find(item => item.key === type);
        if (!item) {
            return '';
        }

        return <span style={
            {
                color: 'red'
            }
        }>共{item.number}位&nbsp;&nbsp;剩余{item.number - item.result.length}名</span>
    };

    const changeResetTypeHandle = e => {
        setResetType(e.target.value);
    };
    const resetOkHandle = () => {
        Modal.warning({
            content: '此操作将重置所选数据，是否继续?',
            onOk() {
                switch(resetType) {
                    case 1:
                        // 重置全部数据
                        resetLottery();
                        resetLotteryCode();
                        window.location.href = '/';
                        break;
                    case 2:
                        // 重置抽奖配置
                        resetLottery();
                        window.location.reload();
                        break;
                    case 3:
                        // 重置号码池
                        resetLotteryCode();
                        resetLotteryResult();
                        window.location.href = '/';
                        break;
                    case 4:
                        // 重置抽奖结果
                        resetLotteryResult();
                        window.location.reload();
                        break;
                    default:
                }
                setResetVisible(false);
            }
        });
    };
    const radioStyle = {
        display: 'block',
        height: '30px',
        lineHeight: '30px',
    };
    
    return (
        <>
            {
                playState ? 
                <Button type="danger" className="play-button" onClick={endHandle}>停止</Button> :
                <Button type="primary" className="play-button" onClick={startHandle}>开始</Button>
            }
            <Modal visible={visible} onCancel={() => setVisible(false)} onOk={okHandle} >
                <Row className="list">
                    <Col span={4} className="list--label">
                        抽取奖项:
                    </Col>
                    <Col span={18}>
                        <Row>
                            <Select value={type} style={{ width: 120 }} onChange={setType}>
                                {
                                    lotteryList.map((item, key) => {
                                        return <Option key={key} value={item.key}>{ item.name }</Option>
                                    })
                                }
                            </Select>
                        </Row>
                        <Row>
                            <LotteryTips />
                        </Row>
                    </Col>
                </Row>
            </Modal>
            <Button className="play-button" onClick={() => setResetVisible(true)} disabled={playState}>重置</Button>
            <Modal visible={resetVisible} onOk={resetOkHandle} onCancel={() => setResetVisible(false)}>
                <Radio.Group onChange={changeResetTypeHandle} value={resetType}>
                    <Radio style={radioStyle} value={1}>
                        重置全部数据
                    </Radio>
                    <Radio style={radioStyle} value={2}>
                        重置抽奖配置
                    </Radio>
                    <Radio style={radioStyle} value={3}>
                        重置号码池
                    </Radio>
                    <Radio style={radioStyle} value={4}>
                        重置抽奖结果
                    </Radio>
                </Radio.Group>
            </Modal>
        </>
    )
}